<template>
<div>
   <div class="header">
       <div><img @click="$router.go(-1)" class="back" src="@/assets/imgs/back.png" alt="">  </div>     
       <div>{{movie.name}}</div>
       <div><img class="search" src="@/assets/imgs/search.png" alt=""></div>       
   </div>
   <div class="timeShow">
     <time-nav v-if="showCinemas.length" :data="showCinemas" @getIndex="getTimeIndex($event)"></time-nav>
   </div>
   <ul class="nav">
       <li>全城<img src="@/assets/imgs/down-arrow.png" alt=""></li>
       <li>最近去过<img src="@/assets/imgs/down-arrow.png" alt=""></li>

   </ul>
   <cinema-list :data="cinemas" :index="showCinemas[currentIndex].showDate" v-if="cinemas.length"></cinema-list>
  
</div>
</template>

<style lang="scss" scoped>
.header{
    height:0.88rem;
    width:100%;
    position: fixed;
    top:0;
    left:0;
    div{
        float: left;
        text-align: center;
        line-height: 0.88rem;
        font-size:0.34rem;

    }
    :nth-child(1){
        width:1.125rem;
        height:0.88rem;
        margin-left:0.3rem;
    }
    :nth-child(2){
        width:4.65rem;
        height:0.88rem;
    }
    :nth-child(3){
        width:1.125rem;
        height:0.88rem;
    }

    .back{
        width: 0.22rem;
        height: 0.36rem;
        float: left;
        margin-top:0.3rem;
        margin-left: 0;

    }
    .search{
        width: 0.52rem;
        height: 0.52rem;
        float: right;
        margin-top:0.25rem;
                margin-left: 0;

    }

}

.timeShow{
    height:0.98rem;
    margin-top:0.88rem;
    font-size:0.28rem;
}
.nav{
    height:0.98rem;
    box-sizing: border-box;
    padding:0.3rem 0;
    li{
        float: left;
        width:3.75rem;
        height:0.4rem;
        font-size: 0.28rem;
        text-align: center;
        line-height: 0.4rem;
        img{
            width:0.16rem;
            height:0.06rem;
        }
    }
}

.cinemaList{
    height:1.5rem;
    padding:0.3rem;
}

</style>

<script>
import TimeNav from './components/timenav'
import CinemaList from "./components/cinemalist"
import {getcinemaList,getMovDetail,getcinemaIdList} from '@/api/movie.js'
export default {
    data(){
        return{
            movie:'',
            showCinemas:[],
            currentIndex:'',
            cinemas:[],

        }
    },
    methods:{
        getCinemaList(){
            getcinemaList({cityId:this.$store.state.cityId,cinemaIds:this.showCinemas[this.currentIndex].cinemaList.join(',')}).then(res=>{
                this.cinemas=res.data.cinemas
            })

        },
        getcinemaId(){
            getcinemaIdList({filmId:this.movie.filmId}).then(res=>{
                this.showCinemas=res.data.showCinemas.sort(function(a,b){return a.showDate-b.showDate})
                console.log(this.showCinemas)
                console.log(this.showCinemas[this.currentIndex])
                 this.getCinemaList()
            })

        },
        getMovie(){
            getMovDetail({filmId:this.$route.params.id}).then(res=>{
               this.movie=res.data.film
               this. getcinemaId()
              

            })
        },
       getTimeIndex(e){
           this.currentIndex=e
            this.getcinemaId()
         
       }
    },
    created(){
        this. getMovie()
    },
    components:{
        CinemaList,
        TimeNav

    }
}
</script>